.flex-side-container {
  position: relative;
  flex: 0 auto ;
  min-width: 25vw ;
  height: 100vh ;
}
.side-container {
  position: fixed;
  width: 25vw ;
  height: 100vh ;
  right: 0px ;
  transform-style: preserve-3d;
}
.side-container .site-title {
  font-family: "Noto Serif SC", "HiraMinProN-W6", "Source Han Serif CN", "Source Han Serif SC", "Source Han Serif TC", serif !important;
  position: absolute;
  box-sizing: border-box;
  padding-top: 10px ;
  width: auto ;
  height: auto ;
  top: 40px ;
  left: 30px ;
  writing-mode: vertical-rl;
  user-select: none;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.08);
  border-left: solid #606975 2px;
  transition: 0.8s ;
  backface-visibility: hidden ;
}
.side-container .site-title h3 {
  font-weight: 300 ;
  letter-spacing: 2px ;
  color: #b2bec3 ;
  transition: 0.8s ;
  line-height: 30px ;
  padding-right: 8px ;
}
.side-container .site-title .a-title {
  cursor: pointer;
  color: #636e72 ;
  font-size: 32px ;
  line-height: 60px ;
  font-weight: 900 ;
  margin-top: 0;
  margin-left: 10px ;
  text-decoration: none;
  background-color: transparent;
  transition: 0.8s ;
}
.side-container .site-title .myIcon {
  position: absolute;
  width: 50px ;
  height: 50px ;
  bottom: 10px ;
  left: 3px ;
  background: center / cover no-repeat;
  background-image: url("../img/myIcon.png");
}
.side-container .site-title:hover {
  background: #2d3436 ;
  border-left: solid transparent  2px;
  padding-top: 30px ;
}
.side-container .site-title:hover h3 {
  color: #f1f2f6 ;
}
.side-container .site-title:hover .a-title {
  color: #f1f2f6 ;
}
.side-container .site-title:hover .myIcon {
  background: transparent ;
}
.side-container .category-page {
  position: absolute;
  display: flex ;
  width: 150px ;
  height: 360px ;
  top: 40px ;
  left: 30px ;
  border-right: solid #606975 2px;
  transition: 0.8s ;
  transform: rotateY(180deg);
  backface-visibility: hidden ;
}
.side-container .category-page .category-ul {
  position: relative;
  display: flex ;
  width: auto ;
  height: 100% ;
  flex-direction: column;
  list-style: none;
  user-select: none;
  font-family: "Josefin Sans Light", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "'Hiragino Sans GB", STHeiti, "Microsoft Yahei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
  color: #606975;
}
.side-container .category-page .category-ul li {
  box-sizing: border-box;
  position: relative ;
  white-space: nowrap ;
  flex: 1 ;
  width: auto ;
  max-height: 40px ;
  line-height: 40px ;
  letter-spacing: 2px ;
  padding-right: 10px ;
  text-align: right ;
  transition: 0.3s ;
}
.side-container .category-page .category-ul li a {
  transition: 0.3s ;
  text-decoration: none ;
  color: #606975;
}
.side-container .category-page .category-ul li .iconfont {
  position: absolute;
  right: -30px;
  bottom: 0px ;
  font-size: 20px ;
  transition: 0.3s ;
}
.side-container .category-page .category-ul li::before {
  content: "";
  position: absolute ;
  bottom: 0 ;
  left: 0 ;
  height: 2px ;
  width: 100% ;
  background-color: #2d3436 ;
  transition: 0.3s ;
  transform: scaleX(0);
  transform-origin: right ;
}
.side-container .category-page .category-ul li::after {
  content: "";
  position: absolute;
  bottom: 2px ;
  right: 5px ;
  height: 20px ;
  width: 60% ;
  background-color: #ffcccc ;
  transition: 0.3s ;
  transform: scaleY(0);
  transform-origin: bottom ;
  z-index: -1;
}
.side-container .category-page .category-ul li:hover a {
  color: #f5f6fa ;
  text-shadow: 2px 2px 2px #718093 ;
}
.side-container .category-page .category-ul li:hover::before {
  transform: scaleX(1);
}
.side-container .category-page .category-ul li:hover::after {
  transform: scaleY(1);
}
.side-container .category-page .category-ul li:hover .iconfont {
  text-shadow: 0px 0px 2px #718093 ;
}
.side-container .category-page .category-ul li:hover .icon-file_cpp {
  -webkit-animation: tada 2s linear infinite;
  animation: tada 2s linear infinite ;
  color: #7d5fff ;
}
.side-container .category-page .category-ul li:hover .icon-logo-python {
  -webkit-animation: pulse 2s linear infinite;
  animation: pulse 2s linear infinite ;
  color: #ffeaa7 ;
}
.side-container .category-page .category-ul li:hover .icon-web-link {
  -webkit-animation: wrench 2.5s ease infinite;
  animation: wrench 2.5s ease infinite;
  transform-origin-x: 90%;
  transform-origin-y: 35%;
  transform-origin-z: initial ;
  color: #81ecec ;
}
.side-container .category-page .category-ul li:hover .icon-fengkuangdaqiqiu {
  -webkit-animation: vertical 2s ease infinite;
  animation: vertical 2s ease infinite ;
  color: #ff7675 ;
}
.side-container .category-page .category-ul li:hover .icon-Comment4 {
  -webkit-animation: tada 2s linear infinite;
  animation: tada 2s linear infinite ;
  color: #00b894 ;
}
.side-container .category-page .category-ul li:hover .icon-sakura-flower {
  -webkit-animation: roteInf 2s linear infinite;
  animation: roteInf 2s linear infinite ;
  color: #fab1a0 ;
}
.side-container .category-page .category-ul li:hover .icon-order-play-fill {
  -webkit-animation: pulse 2s linear infinite;
  animation: pulse 2s linear infinite ;
  color: #e056fd ;
}
.side-container .site-title-link {
  box-sizing: border-box;
  position: absolute;
  padding: 0 ;
  margin: 0 ;
  bottom: 30px ;
  left: 30px ;
  width: auto ;
  height: auto ;
  text-align: left ;
}
.side-container .site-title-link ul {
  list-style: none;
  padding: 0 ;
}
.side-container .site-title-link ul li {
  position: relative;
  margin-top: 5px ;
  padding-left: 5px ;
  padding-top: 2px ;
  line-height: 1.3 ;
  font-weight: bold;
  user-select: none;
  transition: 0.5s ;
}
.side-container .site-title-link ul li a {
  cursor: pointer;
  transition: 0.5s ;
  color: #2f3542 ;
  text-decoration: none;
}
.side-container .site-title-link ul li:hover {
  background-color: #2f3542 ;
}
.side-container .site-title-link ul li:hover a {
  color: #ffffff ;
  font-size: 20px ;
}
.side-container .site-title-link ul li:nth-child(n):hover::after {
  transform: scaleY(1);
}
.side-container .site-title-link ul li::after {
  content: "";
  position: absolute;
  bottom: -1.1em;
  right: -3px;
  font-size: 0.7em ;
  font-weight: 300 ;
  border-top: solid 1px #ffffff ;
  transition: 0.5s ;
  transform: scaleY(0);
  transform-origin: top ;
}
.side-container .site-title-link ul li:nth-child(1)::after {
  content: "Category";
}
.side-container .site-title-link ul li:nth-child(2)::after {
  content: "Archive";
}
.side-container .site-title-link ul li:nth-child(3)::after {
  content: "About";
}
.side-container .site-title-link ul li:nth-child(4)::after {
  content: "Site-Link";
}
.side-container .site-title-link ul .soc {
  margin-top: 10px ;
  padding: 0 ;
  box-sizing: border-box;
  z-index: 1 ;
}
.side-container .site-title-link ul .soc:hover {
  background-color: transparent ;
}
.side-container .site-title-link ul .soc:hover a {
  background: transparent ;
  color: transparent ;
  font-size: 20px ;
  box-shadow: 0px 0px 5px transparent ;
}
.side-container .site-title-link ul .soc .email-show-stop span {
  transform: scaleX(1) !important;
}
.side-container .site-title-link ul .soc .email-show-stop .email-div {
  transform: scaleY(1) scaleX(1) !important;
}
.side-container .site-title-link ul .soc a {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  padding: 0 ;
  margin-left: 5px ;
  border-radius: 50% ;
  width: 30px ;
  height: 30px ;
  text-align: center;
  vertical-align: middle;
  line-height: 30px ;
  color: #2d3436;
  font-size: 20px ;
}
.side-container .site-title-link ul .soc a .iconfont {
  padding: 0 ;
  font-size: 20px ;
}
.side-container .site-title-link ul .soc a span {
  position: absolute;
  left: 0 ;
  top: 0 ;
  display: inline-block;
  width: auto;
  padding-left: 40px ;
  padding-right: 10px ;
  height: 30px ;
  text-align: center;
  line-height: 30px ;
  font-size: 10px  ;
  border-radius: 20px ;
  background-color: #f5f6fa;
  box-shadow: 0px 0px 5px #718093;
  z-index: -1;
  transition: 0.3s ;
  transform: scaleX(0);
  transform-origin: 10px 0px ;
}
.side-container .site-title-link ul .soc a .wechat-img {
  position: absolute;
  width: 120px ;
  height: 120px ;
  top: -130px;
  left: 0px;
  border: 0px ;
  transition: 0.5s ;
  transform-origin: 0% 100%;
  transform: scaleY(0) scaleX(0);
}
.side-container .site-title-link ul .soc a .email-div {
  position: absolute;
  width: auto;
  height: 30px ;
  top: -40px;
  left: 0px;
  border: 0px ;
  text-align: center;
  line-height: 30px ;
  font-size: 10px  ;
  padding-left: 10px ;
  transition: 0.5s ;
  transform-origin: 0% 100%;
  transform: scaleY(0) scaleX(0);
}
.side-container .site-title-link ul .soc a:hover {
  color: #f5f6fa;
  background: #f5f6fa;
}
.side-container .site-title-link ul .soc a:nth-child(1):hover {
  background: #2d3436;
}
.side-container .site-title-link ul .soc a:nth-child(1):hover span {
  color: #2d3436;
}
.side-container .site-title-link ul .soc a:nth-child(2):hover {
  background: #00b894;
}
.side-container .site-title-link ul .soc a:nth-child(2):hover .wechat-img {
  transform: scaleY(1) scaleX(1);
}
.side-container .site-title-link ul .soc a:nth-child(2):hover span {
  color: #00b894;
}
.side-container .site-title-link ul .soc a:nth-child(3):hover {
  background: #ff7675;
}
.side-container .site-title-link ul .soc a:nth-child(3):hover .email-div {
  transform: scaleY(1) scaleX(1);
}
.side-container .site-title-link ul .soc a:nth-child(3):hover span {
  color: #ff7675;
}
.side-container .site-title-link ul .soc a:hover span {
  transform: scaleX(1);
}
.side-container .site-title-link .site-info {
  margin-top: 10px;
  padding-top: 0 ;
  font-size: 12px ;
  font-weight: 700 ;
  padding-left: 5px ;
  user-select: none;
  color: #636e72 ;
}
.side-container .site-title-link .site-info a {
  cursor: pointer;
  transition: 0.5s ;
  color: #636e72 ;
  text-decoration: none;
}
#link {
  position: fixed;
  right: 0 ;
  top: 0 ;
  letter-spacing: 1.3px ;
  width: auto;
  height: 10px ;
  color: #95a5a6;
  font-size: 0.6em ;
  padding: 10px ;
}
.login-register {
  position: fixed;
  bottom: 5px ;
  right: 5px ;
  font-family: "Noto Serif SC", "HiraMinProN-W6", "Source Han Serif CN", "Source Han Serif SC", "Source Han Serif TC", serif;
  margin-top: 10px ;
  padding: 5px ;
  border-radius: 8px ;
  border-bottom-left-radius: 0 ;
  border-bottom-right-radius: 0 ;
  font-weight: 900 ;
  letter-spacing: 1.3px;
  line-height: 1.3 ;
  user-select: none;
  transition: 0.5s ;
  color: #203744;
  z-index: 1 ;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.login-register img {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 40px ;
  height: 40px ;
}
.login-register a,
.login-register span {
  word-wrap: nowrap ;
  -webkit-backface-visibility: hidden;
  /* Chrome ºÍ Safari */
  -moz-backface-visibility: hidden;
  /* Firefox */
  -ms-backface-visibility: hidden;
  /* Internet Explorer */
  transition: 0.3s ;
}
.login-register span {
  display: inline-block;
  position: relative;
  z-index: 2 ;
}
.login-register a {
  display: inline-block;
  position: absolute;
  left: 0 ;
  text-decoration: none;
  color: #203744;
  padding-right: 0 ;
  margin-right: 0 ;
}
.login-register .login {
  position: relative;
}
.login-register .cur-user {
  letter-spacing: 0px ;
  font-size: 0.8em ;
  margin-bottom: 2px ;
}
.login-register .cur-user::after {
  content: "";
  width: 0 ;
  height: 2px ;
  position: absolute;
  bottom: -5px;
  left: 0 ;
  background: #f09199 ;
  transition: 0.3s ;
  transform-origin: left;
}
.login-register:hover .wrench-use {
  animation-play-state: running;
}
.login-register:hover span {
  color: #478384 ;
}
.login-register:hover .cur-user {
  color: #1f3134 ;
}
.login-register:hover .cur-user::after {
  width: 100% ;
}
.footer-page {
  width: auto ;
  height: auto ;
  position: fixed;
  display: flex;
  flex-direction: column;
  right: 0 ;
  bottom: 150px ;
  font-family: "Noto Serif SC", "HiraMinProN-W6", "Source Han Serif CN", "Source Han Serif SC", "Source Han Serif TC", serif;
  z-index: 1 ;
  box-sizing: border-box;
}
.footer-page a {
  text-decoration: none;
  color: #f5f6fa ;
}
.footer-page .cur-page {
  position: absolute;
  bottom: -30px;
  right: 0 ;
  display: block;
  width: auto;
  line-height: 22px ;
  font-size: 14px ;
  font-weight: 700 ;
  user-select: none;
  background-color: #c9171e;
  color: #f5f6fa;
  border-radius: 5px ;
  border-bottom-right-radius: 0 ;
  border-top-right-radius: 0 ;
  box-shadow: 0px 0px 5px rgba(47, 54, 64, 0.7);
  padding-left: 5px ;
  padding-right: 2px ;
  letter-spacing: 2px ;
  text-align: center;
  white-space: nowrap ;
}
.footer-page .page-prev,
.footer-page .page-next {
  display: block;
  position: relative;
  width: 2.2em ;
  font-size: 12px ;
  font-weight: 700 ;
  padding: 10px ;
  padding-left: 0px ;
  line-height: 22px ;
  letter-spacing: 3px;
  text-align: center;
  background: #2f3640 ;
  writing-mode: tb-rl;
  margin-bottom: 2px ;
  border-radius: 7px ;
  border-bottom-right-radius: 0 ;
  border-top-right-radius: 0 ;
  box-shadow: 0px 0px 5px #2f3640;
  transition: 0.3s ;
  transform-origin: right;
  transform: translateX(1em);
}
.footer-page .page-prev:hover,
.footer-page .page-next:hover {
  transform: translateX(0em);
}
.footer-page .page-next {
  opacity: 0.8;
}
.to-board {
  position: fixed ;
  font-size: 12px ;
  bottom: 60px ;
  left: 0 ;
  border-radius: 0 5px 5px 0;
  width: 35px;
  left: -17px;
  color: #fff;
  font-size: 13px;
  padding: 5px 0;
  padding-top: 5px;
  padding-right: 0;
  padding-bottom: 5px;
  padding-left: 5px;
  font-weight: 700;
  z-index: 99;
  visibility: visible;
  writing-mode: vertical-rl;
  transition-duration: .5s,.5s;
  border-radius: 0 6px 6px 0 !important;
  background-color: orange;
  user-select: none ;
  cursor: pointer;
  text-decoration: none ;
}
.to-board:hover {
  padding-left: 17px;
}
.moon-back {
  position: fixed;
  width: 100px;
  height: 100px;
  top: 40px ;
  right: 40px ;
  background-image: url("../img/moon_2.png");
  z-index: 12 ;
  cursor: pointer;
}
.moon-light {
  position: fixed;
  width: 100px ;
  height: 100px ;
  border-radius: 50% ;
  z-index: 11 ;
  top: 40px ;
  right: 40px ;
}
.moon-light::after {
  content: "";
  position: absolute;
  width: 70%;
  height: 70%;
  top: 50%;
  margin-top: -40%;
  left: 50%;
  margin-left: -40%;
  border-radius: 50%;
  background-color: #fab1a0;
  -webkit-filter: blur(40px);
  -moz-filter: blur(40px);
  -ms-filter: blur(40px);
  filter: blur(30px);
}
.moon-font {
  position: fixed;
  width: 100px;
  height: 100px;
  right: 200px ;
  bottom: 200px ;
  background-image: url("../img/pic3.png");
  z-index: 13 ;
}
.lightCover {
  position: fixed;
  width: 0 ;
  height: 0 ;
  z-index: 10 ;
}
#canvas_sakura {
  z-index: 13 !important ;
}
.fake-info {
  position: fixed;
  right: 80px ;
  bottom: 40px ;
  user-select: none;
  color: rgba(99, 110, 114, 0.8);
  z-index: 13 ;
}
.fake-info h1 {
  font-size: 20px ;
  letter-spacing: 1.1px;
  font-weight: 400 ;
}
.fake-info p {
  font-size: 14px ;
  letter-spacing: 0 ;
}
.moon-hidden {
  display: none !important;
}
#preogressbar {
  position: fixed;
  top: 0 ;
  left: 0 ;
  width: 7px ;
  z-index: 13 ;
  background-image: linear-gradient(to top, #ff7675, #fab1a0, #81ecec);
  animation-name: scrossTurn ;
  animation-duration: 5s ;
  animation-play-state: running;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.72, 0.01, 1, 1);
  animation-delay: 0s ;
  box-shadow: 0 0 10px rgba(99, 110, 114, 0.5);
}
#preogressbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0 ;
  width: 120% ;
  height: 100% ;
  background-image: linear-gradient(to top, #fab1a0, #ecf0f1, #81ecec, #00b894);
  filter: blur(40px);
}
#preogressbar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0 ;
  width: 120% ;
  height: 100% ;
  background-image: linear-gradient(to top, #fab1a0, #ecf0f1, #81ecec, #00b894);
  filter: blur(80px);
}
#scrollpath {
  position: absolute;
  top: 0 ;
  right: 0 ;
  width: 10px ;
}
